// 一、认识jQuery：jQuery是一个JavaScript库，是原生js的代码简化版；简单易上手

// 二、jQuery的安装和使用
// 1.先下载压缩版的jQuery.js文件
// 2.在html中，先引入jQuery.js文件，再引入自己写的js文件
// console.log(window);

// console.log(jQuery===$);//true
// 3.使用jQuery时，用$符号代替

// 三、jQuery基础语法
// 1.$("css选择器"):获取节点;返回值都是数组

// console.log($("#one"));
// console.log($(".two"));
// console.log($("li"));
// console.log($("#list li"));
// console.log($("#list li:nth-of-type(2)"));

// 2.$("css选择器").操作方法()
// $("#one").hide();//隐藏id=one的元素
// $(".two").hide();//隐藏class=two的所有元素

// let two=document.getElementsByClassName("two");
// for(let i=0;i<two.length;i++){
//     two[i].classList.add("test");
// }

// 四、jQuery事件
// 语法：$("css选择器").事件名称(function(){})

// $("#list li").click(function () {
//     console.log(123);
// })


// $("#one").bind(
//     {
//         "click":function () {
//             console.log(11111);
//         },
//         "click":function(){
//             console.log("鼠标进入")
//         }
//     }
    
// )

// $("#one").click(function(){
//     console.log(111);
//     console.log(event);
// })
// $("#one").mouseenter(function(){
//     console.log(222);
// })

// 五、效果
// 1.隐藏、显示
// $(".hide").click(function(){
//     $("#list").hide();
//     // $("#list").hide(2000,function(){
//     //     console.log(6666);
//     // });
// })

// $(".show").click(function(){
//     // $("#list").show();
//     $("#list").show(2000,function(){
//         console.log(6666);
//     });
// })

// $(".tog").click(function(){
//     $("#list").toggle(2000)
// })

// 2.淡入、淡出
// $(".hide").click(function(){
//     $("#list").fadeOut(2000);//淡出
// })

// $(".show").click(function(){
//     $("#list").fadeIn(2000);//淡入
// })

// // $(".tog").click(function(){
// //     $("#list").fadeToggle(2000);//切换
// // })

// $(".tog").click(function(){
//     $("#list").fadeTo(2000,0.6);//透明度

// })

// 3.滑动
// slideDown():向下滑动
// slideUp():向上滑动
// slideToggle():切换滑动

// 4.动画
// 获取节点.animate({css样式},[毫秒],[回调函数])
// $(".btn").click(function(){
//     $(".ball").animate({
//         left:"500px",
//         borderRadius: "50%"
//     },2000)
// })


// 六、jQuery操作DOM
// 1.操作内容
// text():设置或者获取文本内容；相当于原生js的innerText
// console.log( $("#list").text("6666666666"));
// html():设置或者获取所有内容；相当于原生js的innerHtml
// console.log( $("#list").html("<p>8888</p>"));
// val():设置或者获取表单元素里面的内容；相当于原生js的value
// console.log($("input").val("789"));


// 2.获取或者设置元素属性
// let one=document.getElementById("one");
// console.log(one.getAttribute("id"));
// console.log(one.setAttribute("class","qwe"));

// console.log($("#one").attr("id"));
// console.log($("#one").attr("class","xyz"));

// 3.插入内容
// 元素内容之后插入
// $("#one").append("<span> hello </span>");
// // 元素内容之前插入
// $("#one").prepend("<span> hello </span>");
// // 元素之后插入
// // $("#one").after("world");
// $("#one").after("<p>world</p>");
// // 元素之前插入
// $("#one").before("<p>world</p>");

// 4.删除
// $("#list").remove();//删除整个元素所有内容
// $("#list").empty();//删除元素里面所有的子元素

// 5.操作类名
// $("#list").addClass("qwe xyz")
// $("#list").removeClass("qwe");
// $("#list").toggleClass("qaz");
// // css():该方法获取的样式值是所有的样式值
// console.log($("#list").css("background-color"));
// console.log($("#list").css("color"));
// $("#list").css("color","yellow");
// $("#list").css({"color":"yellow","fontSize":"100px"});

// 6.元素尺寸
// outerWidth():元素宽度（包含内边距和边框线）
// outerHeight():元素高度（包含内边距和边框线）

// 七、通过关系获取节点
// 1.父元素节点
console.log($("#five").parent().parent());
// 2.子元素节点
console.log($("#list").children("#five"));
// 3.下一个兄弟元素节点
console.log($("#list").next());
// 4.上一个兄弟元素节点
console.log($("#list").prev());
// 5.通过下标指定某一个元素，返回值是数组
console.log($("#list").children().eq(2).hide());

